<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<script type="text/javascript" src="./js/common.js"></script>
	</head>
	<body>
		<div class="mui-content mui-scroll-wrapper" id="refreshContainer">
			<div class="mui-scroll">
				<div class="bg-dark mui-text-center pdt-5 pdb-5 pos-relative logo-content">
					<div class="bg-dark flex flex-jc-around pdt-10 pd-10 pos-relative">
						<img src="./img/arbicap_logo.png" style="height: 80px" alt="">
						<h1 style="height: 80px;line-height: 80px;" class="cl-white">阿尔卑斯</h1>
					</div>
				</div>
				<ul class="mui-table-view recharge">
					<!-- 报单记录 -->
				</ul>
			</div>
		</div>
		<script>
			mui('.logo-content').on('click', 'div', function() {
				location.href = './index.html'
			})

			mui('.recharge').on('tap', 'a', function() {
				window.top.location.href = this.href;
			});

			const id = localStorage.getItem('MEMBERS')
			let page = 1
			mui.init({
				pullRefresh: {
					container: '#refreshContainer', //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: false, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: function() {
							page++
							getPage()
						}
					}
				}
			});

			const getPage = function() {
				mui.ajax(HOST + 'v1/recharge-list', {
					data: {
						page: page,
						members_id: id
					},
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(res) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						if (res.result === 0) {
							const data = res.data.list
							let html = ''
							if (page === 1) {
								html = ''
							} else {
								html = mui('.recharge')[0].innerHTML
							}
							let totalPage = res.data.pages.totalPage
							if (page >= totalPage) {
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
							}
							if (data.length > 0) {
								data.forEach((item) => {
									let btn = ''
									if (item.status === '2') {
										btn =
											`<a href="./chargeback.html?recharge_id=${item.recharge_id}" type="button" class="mui-btn mui-btn-danger pos-relative" style="padding: 3px 5px;z-index: 99">退单</a>`
									}
									html +=
										`
									<li class="mui-table-view-cell">
										<div class="flex flex-jc-between flex-ai-center">
											<div>
												<p>${item.name+' '+item.tel}</p>
												<p>报单金额：￥${item.money}</p>
												<p>身份证号：${item.id_card}</p>
												<p>报单日期：${item.create_date}</p>
												<p>状态：${item.status==1?'待审核':(item.status==2?'审核通过':(item.status==3?'审核不通过':(item.status==4?'申请退单中':'退单审核通过')))}</p>
											</div>
											${btn}
										</div>
									</li>
								`
								})
							} 
							mui('.recharge')[0].innerHTML = html
						} else {
							mui.toast(res.message, {
								duration: 'long',
								type: 'div'
							})
						}
					},
					error: function(xhr, type, errorThrown) {
						mui.toast(errorThrown, {
							duration: 'long',
							type: 'div'
						})
					}
				});
			}

			getPage()

		</script>
	</body>
</html>
